<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08-表单</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
    //1、处理text、textarea，调用类内部的方法要加this.
    class NameForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: ""};
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleChange(event) {
            this.setState({value: event.target.value});
        }

        handleSubmit(event) {
            alert("输入的内容：" + this.state.value);
            event.preventDefault();
        }

        render() {
            return(
                <form onSubmit={this.handleSubmit}>
                    <label>
                        名字：
                        {/*<input type="text" value={this.state.value} onChange={this.handleChange} />*/}
                        <textarea value={this.state.value} onChange={this.handleChange} />
                    </label>
                    <input type="submit" value="提交" />
                </form>
            );
        }
    }

    //ReactDOM.render(
    //    <NameForm />,
    //    document.getElementById("app")
    //);

    //---------------------------------------------------------
    
    //2、处理select，<select>的value值表示默认选中项，调用类内部的方法要加this.
    //<select>标签multiple={true}如何实现
    class FlavorForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {value: "coconut"};
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleChange(event) {
            this.setState({value: event.target.value});
        }

        handleSubmit(event) {
            alert("你喜欢的风味是：" + this.state.value);
            event.preventDefault();
        }

        render() {
            return(
                <form onSubmit={this.handleSubmit}>
                    <label>
                        选择你喜欢的风味：
                        <select value={this.state.value} onChange={this.handleChange}>
                            <option value="grapefruit">葡萄柚</option>
                            <option value="lime">酸橙</option>
                            <option value="coconut">椰子</option>
                            <option value="mango">芒果</option>
                        </select>
                    </label>
                    <input type="submit" value="提交" />
                </form>
            );
        }
    }

    //ReactDOM.render(
    //    <FlavorForm />,
    //    document.getElementById("app")
    //);

    //---------------------------------------------------------
    
    //3、表单中处理多个输入
    class MultipleInputForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                isGoing: true,
                numberOfGuests: 3
            };
            this.handleInputChange = this.handleInputChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleInputChange(event) {
            const target = event.target;
            const name = target.name;
            const value = target.type === "checkbox" ? target.checked : target.value;
            this.setState({[name]: value});
        }

        handleSubmit(event) {
            alert("是否参与：" + this.state.isGoing + " 来宾人数：" + this.state.numberOfGuests);
            event.preventDefault();
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <label>
                        是否参与：
                        <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} />
                    </label>
                    <br/>
                    <label>
                        来宾人数：
                        <input name="numberOfGuests" type="input" value={this.state.numberOfGuests} onChange={this.handleInputChange} />
                    </label>
                    <input type="submit" value="提交" />
                </form>
            );
        }
    }

    ReactDOM.render(
        <MultipleInputForm />,
        document.getElementById("app")
    );

</script>
</html>